<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="description" content="demo of the bpmn.io BPMN 2.0 web modeler">
    <meta name="keywords" content="open source, toolkit, BPMN 2.0, business process, embed, model, editor, integrate, extend">
    <meta name="author" content="bpmn.io">

    <title>bpmn modeler | demo.bpmn.io</title>

    <link rel="stylesheet" href="./vendor/bpmn-js/assets/diagram-js.css" />
    <link rel="stylesheet" href="./vendor/bpmn-js/assets/bpmn-font/css/bpmn.css" />

    <link rel="stylesheet" href="./css/app.css" />

    <link rel="icon" href="/img/favicon.ico" />
</head>

<body class="intro">
    <div class="content" id="js-drop-zone">

        <div class="screen intro">
            <div class="note">

                <div class="project-logo">
                    <a href="http://bpmn.io">
                        <span class="icon-bpmn-io-logo"></span>
                    </a>
                </div>

                <div class="message">
                    <a href title="open BPMN diagram from local file system" jsaction="click:bio.openLocal">
                        <span class="icon-open" style="font-size: 1em"></span> Open</a> or

                    <a href="/new" title="create a new BPMN diagram">
                        <span class="icon-plus-circled" style="font-size: 1em"></span> create</a> a BPMN diagram.
                </div>

                <div class="samples">

                    <p>Use
                        <a href="http://bpmn.io">bpmn.io</a> to view, create and edit BPMN 2.0 in your browser.</p>

                    <a class="sample" href="/s/start">
                        <img class="img" src="./bpmn/img/screencast.gif">
                        <img class="tryit" src="./img/tryit.png">

                        <div class="caption">
                            What if you are hungry? Click the diagram to continue modeling.
                        </div>
                    </a>

                </div>
            </div>
        </div>

        <div class="screen loading">

            <div class="note">
                <div class="project-logo">
                    <span class="icon-bpmn-io"></span>
                </div>

                <div class="message">
                    loading diagram, please hang tight
                    <span class="icon-loading animate-spin"></span>
                </div>
            </div>
        </div>

        <div class="screen error">
            <div class="note">
                <div class="message">
                    <p>
                        Ooops, we could not display the diagram.
                    </p>
                    <p>
                        <small>
                            You believe your input is valid
                            <a href="http://www.omg.org/spec/BPMN/2.0/">BPMN 2.0 XML</a>?
                        </small>
                    </p>
                    <p>
                        <small>
                            Consult our
                            <a href="https://forum.bpmn.io" target="_blank">forum</a> or
                            <a href="https://github.com/bpmn-io/bpmn-js/issues" target="_blank">file an issue</a>
                            with the details shown below.
                        </small>
                    </p>
                </div>

                <div class="details">
                    <span>Import Error Details</span>
                    <textarea class="error-log"></textarea>
                </div>
            </div>
        </div>

        <div class="canvas" id="js-canvas"></div>
    </div>

    <div class="io-import-export">

        <ul class="io-import io-control io-control-list io-horizontal">
            <li>
                <button title="open BPMN diagram from local file system" jsaction="click:bio.openLocal">
                    <span class="icon-open"></span>
                </button>
            </li>
            <li class="vr" style="margin-left: 2px"></li>
            <li>
                <button title="create new BPMN diagram" jsaction="click:bio.createNew">
                    <span class="icon-plus-circled"></span>
                </button>
            </li>
        </ul>

        <!--[if !IE]><!-->
        <ul class="io-export io-control io-control-list io-horizontal">
            <li>
                <a target="_blank" href class="download" title="download BPMN diagram" jswidget="downloadBPMN" data-track="diagram:download-bpmn">
                    <span class="icon-download"></span>
                </a>
            </li>
            <li>
                <a target="_blank" href class="download" title="download as SVG image" jswidget="downloadSVG" data-track="diagram:download-svg">
                    <span class="icon-picture"></span>
                </a>
            </li>
        </ul>
        <!--<![endif]-->
    </div>

    <div class="io-alerts">

        <div class="io-control alert" jswidget="import-warnings-alert">
            <a href class="close" aria-hidden="true" jsaction="click:bio.clearImportDetails">&times;</a>
            Diagram may not render correctly due to import warnings.

            <a href jsaction="click:bio.showImportDetails">Show details</a>.
        </div>

        <div class="io-control alert" jswidget="undo-redo-alert">
            You edited the diagram.

            <a href jsaction="click:bio.undo">Undo last change</a>.

            <a href class="close" aria-hidden="true" jsaction="click:bio.hideUndoAlert">&times;</a>
        </div>

    </div>

    <div class="io-help">

        <ul class="io-control-list io-horizontal">
            <li>
                <a href="https://forum.bpmn.io/t/8" title="report an issue or suggest improvements" target="_blank" data-track="help:open-report">
                    <span class="icon-comment"></span>
                </a>
            </li>
            <li>
                <button title="more information about this demo" jsaction="click:bio.showAbout" data-track="help:open-about">
                    <span class="icon-info"></span>
                </button>
            </li>
        </ul>
    </div>

    <div class="io-legal">

        <ul class="io-control-list io-horizontal">
            <li>
                <a href="http://bpmn.io/legal/privacy.html" target="_blank" title="privacy policy">
                    privacy
                </a>
            </li>
            <li>
                <a href="http://bpmn.io/legal/terms.html" target="_blank" title="terms of use">
                    terms
                </a>
            </li>
            <li>
                <a href="http://bpmn.io/legal/imprint.html" target="_blank" title="imprint">
                    imprint
                </a>
            </li>
        </ul>
    </div>

    <div class="io-editing-tools" jswidget="editing-tools">
        <ul class="io-control-list io-horizontal">
            <li class="io-control">
                <button title="Toggle keyboard shortcuts overlay" jsaction="click:bio.showKeyboard">
                    <span class="icon-keyboard"> </span>
                </button>
            </li>
            <li class="io-control">
                <button title="Toggle Fullscreen" jsaction="click:bio.toggleFullscreen">
                    <span class="icon-resize-full"> </span>
                </button>
            </li>
        </ul>
    </div>

    <div class="io-zoom-controls">

        <ul class="io-zoom-reset io-control io-control-list">
            <li>
                <button title="reset zoom" jsaction="click:bio.zoomReset">
                    <span class="icon-size-reset"></span>
                </button>
            </li>
        </ul>

        <ul class="io-zoom io-control io-control-list">
            <li>
                <button title="zoom in" jsaction="click:bio.zoomIn">
                    <span class="icon-plus"></span>
                </button>
            </li>
            <li>
                <hr/>
            </li>
            <li>
                <button href title="zoom out" jsaction="click:bio.zoomOut">
                    <span class="icon-minus"></span>
                </button>
            </li>
        </ul>
    </div>


    <div class="io-dialog about" jswidget="about-dialog">

        <div class="content">
            <h1>About bpmn.io</h1>

            <p>
                bpmn.io offers tools to view, annotate and edit
                <a href="http://www.bpmn.org">BPMN 2.0</a> diagrams on the web. Refer to our
                <a href="http://bpmn.io">project website</a> for more information.
            </p>

            <p>
                This is a demo of
                <a href="https://github.com/bpmn-io/bpmn-js">bpmn-js</a> the JavaScript toolkit that powers bpmn.io.
                <p>

                    <h2>Built with open-source software</h2>

                    <p>
                        <a href="https://github.com/bpmn-io/bpmn-js">bpmn-js</a> is built with the help of a number of open-source libraries:
                    </p>

                    <ul>
                        <li>
                            <a href="https://github.com/isaacs/sax-js">saxjs</a>
                        </li>
                        <li>
                            <a href="http://snapsvg.io">snapsvg</a>
                        </li>
                        <li>
                            <a href="http://jquery.com">jquery</a>
                        </li>
                    </ul>

                    <p>
                        Icons are assembled using
                        <a href="http://fontello.com">fontello</a> from the following icon fonts:
                    </p>

                    <ul>
                        <li>
                            <a href="http://fontello.com">Fontelico</a> crowdsourced, for Fontello project</li>
                        <li>
                            <a href="http://fortawesome.github.com/Font-Awesome/">Font Awesome</a> by Dave Gandy</li>
                        <li>
                            <a href="http://www.entypo.com">Entypo</a> by Daniel Bruce</li>
                        <li>
                            <a href="http://somerandomdude.com/work/iconic/">Iconic</a> by P.J. Onori</li>
                    </ul>

                    <a class="project-logo" href="http://bpmn.io">
                        <span class="icon-bpmn-io"></span>
                    </a>

                    <p>
                        You can find all bpmn.io related open-source projects on
                        <a href="https://github.com/bpmn-io">GitHub</a>.
                    </p>
        </div>
    </div>

    <div class="io-dialog import-warnings" jswidget="import-warnings-dialog">

        <div class="content">
            <h1>Import Warnings</h1>

            <p>
                One or more problems have been identified when trying to import the BPMN 2.0 diagram:
            </p>

            <p>
                <textarea class="error-log"></textarea>
                <p>

                    <p>
                        This may have been caused by malformed input data. As a result the diagram may not render correctly.
                    </p>

                    <h2>Need help on this?</h2>

                    <p>
                        File a report in
                        <a href="https://forum.bpmn.io" target="_blank">our forum</a>. Attach your diagram and the above error log.
                    </p>

                    <a class="project-logo" href="http://bpmn.io">
                        <span class="icon-bpmn-io"></span>
                    </a>
        </div>
    </div>

    <div class="io-dialog keybindings-dialog" jswidget="keybindings-dialog">

        <div class="content bindings-mac">
            <h1>Keyboard Shortcuts</h1>
            <table>
                <tbody>
                    <tr>
                        <td>Undo</td>
                        <td class="binding">⌘ + Z</td>
                    </tr>
                    <tr>
                        <td>Redo</td>
                        <td class="binding">⌘ + ⇧ + Z</td>
                    </tr>
                    <tr>
                        <td>Select All</td>
                        <td class="binding">⌘ + A</td>
                    </tr>
                    <tr>
                        <td>Scrolling (Vertical)</td>
                        <td class="binding">⌥ + Scrolling</td>
                    </tr>
                    <tr>
                        <td>Scrolling (Horizontal)</td>
                        <td class="binding">⌥ + ⇧ + Scrolling</td>
                    </tr>
                    <tr>
                        <td>Direct Editing</td>
                        <td class="binding">E</td>
                    </tr>
                    <tr>
                        <td>Hand Tool</td>
                        <td class="binding">H</td>
                    </tr>
                    <tr>
                        <td>Lasso Tool</td>
                        <td class="binding">L</td>
                    </tr>
                    <tr>
                        <td>Space Tool</td>
                        <td class="binding">S</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="content bindings-default">
            <h1>Keyboard Shortcuts</h1>
            <table>
                <tbody>
                    <tr>
                        <td>Undo</td>
                        <td class="binding">
                            <code>ctrl + Z</td>
          </tr>
          <tr>
            <td>Redo</td>
            <td class="binding"><code>ctrl + ⇧ + Z</td>
          </tr>
          <tr>
            <td>Select All</td>
            <td class="binding"><code>ctrl + A</td>
          </tr>
          <tr>
            <td>Scrolling (Vertical)</td>
            <td class="binding">ctrl + Scrolling</td>
          </tr>
          <tr>
            <td>Scrolling (Horizontal)</td>
            <td class="binding">ctrl + ⇧ + Scrolling</td>
          </tr>
          <tr>
            <td>Direct Editing</td>
            <td class="binding">E</td>
          </tr>
          <tr>
            <td>Hand Tool</td>
            <td class="binding">H</td>
          </tr>
          <tr>
            <td>Lasso Tool</td>
            <td class="binding">L</td>
          </tr>
          <tr>
            <td>Space Tool</td>
            <td class="binding">S</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- use-min -->
  <script>
    var dist = localStorage && localStorage.debug ? '' : '.min';

    document.write('<script src="./bpmn/app' + dist + '.js"><\/script>');
</script>
  <!-- /use-min -->
</body>
  <script src="./js/support/ga.js"></script>

  <!-- $build$ -->
</html>